<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>The Jquery Ajax 01 Page</h1>
<button onclick="doAjax()">$.ajax(...)</button>
<button onclick="doAjaxPost()">$.post(...)</button>
<button onclick="doAjaxGet()">$.get(...)</button>
<button onclick="doAjaxLoad()">$("..").load(...)</button>
<div id="result"></div>
<script src="/js/jquery.min.js"></script>
<!--第三步:添加button事件对应的事件处理函数,代码如下:
ajax 函数应用,代码如下:-->
<script>
function doAjax(){
let url="http://localhost/doAjaxGet";
let params="";
//这里的$代表jquery对象
//ajax({})这是jquery对象中的一个ajax函数(封装了ajax操作的基本步骤)
$.ajax({
type:"GET",//省略type,默认就是get请求
url:url,
data:params,
async:true,//默认为true,表示异步
success:function(result){//result为服务端响应的结果
console.log(result);//ajax函数内部将服务端返回的json串转换为了js对象
}//success函数会在服务端响应状态status==200,readyState==4的时候执行.
});
}
<!--post 函数应用,代码如下-->
function doAjaxPost() {
    let url = "http://localhost/doAjaxPost";
    let params = "id=101&name=Computer&remark=Computer...";
    $.post(url, params, function (result) {
        $("#result").html(result);
    });

    <!--get函数应用,代码如下:-->
    function doAjaxGet() {
        let url = "http://localhost/doAjaxGet";
        let params = "";
        $.get(url, params, function (result) {
            $("#result").html(result);
        }, "text");
    }

    <!--load 函数应用,代码如下:-->
    function doAjaxLoad() {
        let url = "http://localhost/doAjaxGet";
        $("#result").get(url, function () {
            console.log("load complete")
        });
    }
}
</script>
</body>
</html>